<template>
    <el-dialog v-model="isShow" title="禁用操作：" draggable destroy-on-close append-to-body>
        <div class="flex_str_str" style="margin-bottom: 30px;">
            <div>禁用时间：</div>
            <el-config-provider :locale="zhCn">
                <el-date-picker v-model="time" type="date" placeholder="请选择日期" />
            </el-config-provider>
        </div>

        <div class="flex_str_str">
            <div>禁用原因：</div>
            <textarea class="textSty" v-model="adoptParams.disableReason"></textarea>
        </div>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="adoptFun">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, toRefs } from 'vue'
import { disableUserApi } from '@/api/index/index'
import { ElMessage } from 'element-plus';
import { formatToDateTime } from '@/utils/moment'
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const props = defineProps({
    isShow: {
        type: Boolean,
        defaul: false
    },
    id: {
        type: Number,
        default: 0
    }
})
const emit = defineEmits(['close'])
const { isShow, id } = toRefs(props)
const time = ref('')
const adoptParams = reactive({
    disableReason: '',
    id: id.value,
    disableTime: ''
})
const cancel = () => {
    emit('close')
}
const adoptFun = () => {
    let times = formatToDateTime(time.value)
    adoptParams.disableTime = times.substring(0, 10)
    console.log(adoptParams)
    disableUserApi(adoptParams).then((res: any) => {
        if (res.status == 200) {
            ElMessage.success('已禁用')
            emit('close')
        }
    })
}
</script>
<style scoped>
.textSty {
    width: 400px;
    height: 200px;
    resize: none;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>